<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>Accordion Tests</title>

	<script type="text/javascript" src="../../../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','base_rtl','IconMenu','IconMenu_rtl']"></script>
	<script type="text/javascript" src="../../../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true, has:{'dojo-bidi': true}"></script>
	<style type="text/css">
		@import "../../../themes/common/domButtons/DomButtonBlackRightArrow16.css";
		@import "../../../themes/common/domButtons/DomButtonWhiteDownArrow16.css";
		@import "../../../themes/common/dijit/dijit.css";
		html,body{
			height: 100%;
		}
		.myPane {
			background-image: -webkit-gradient(linear, left top, left bottom, from(#dcdcdc), to(#FFFFFF));
			font-family: Times New Roman, Helvetica;
			color: black;
		}
	</style>

	<script type="text/javascript">
		var WIDGET_PROPS = [{icon:"../../images/tab-icon-36w.png", selected:true},
							{icon:"../../images/tab-icon-32w.png"},
							{icon:"../../images/tab-icon-30w.png"},
							{icon:"../../images/tab-icon-16w.png"},
							{icon:"../../images/tab-icon-19w.png"},
							{icon:"../../images/tab-icon-29w.png"}];
		var WIDGET_LABELS = [{label:"Mute"},
							{label:"Keypad"},
							{label:"Settings"},
							{label:"Info"},
							{label:"Tour"},
							{label:"Contacts"}];
		var WIDGET_CLASS = "mblIconMenu";
		var WIDGET_CLASS_RTL = "mblIconMenu mblIconMenuRtl";
		var WIDGET_ICON_SEL = "mblIconMenuItemSel";
		var ITEM_NUM = 6;
		var CHILDWIDGET_CLASSNAME1 = "mblIconMenuItem";
		var CHILDWIDGET_CLASSNAME2 = "mblIconMenuItemFirstColumn";
		var CHILDWIDGET_CLASSNAME3 = "mblIconMenuItemLastColumn";
		var CHILDWIDGET_CLASSNAME4 = "mblIconMenuItemFirstRow";
		var CHILDWIDGET_CLASSNAME5 = "mblIconMenuItemLastRow";
		var COL_NUM = 3;

		require([
			"dojo/_base/array",
			"dojo/_base/lang", // dojo.mixin
			"dojo/dom-construct", // dojo.place
			"dojo/dom-class", // dojo.hasClass
			"dojo/ready", // dojo.ready
			"dijit/registry",  // dijit.byId
			"doh/runner",	//doh functions
			"dojox/mobile/IconMenuItem",
			"dojox/mobile/IconMenu",
			"dojox/mobile/parser",
			"dojox/mobile",
			"dojox/mobile/compat",
			"dojox/mobile/View"
		], function(array, lang, domConst, domClass, ready, registry, runner, IconMenuItem, IconMenu){
			function _createAccordionDeclaratively(widgetId){
				return registry.byId(widgetId);
			}
			
			function _createAccordionProgrammatically(placeHolderId, widgetId){
				var r = new IconMenu({id:widgetId, style:{width:"274px", height:"210px", margin:"20px"}, cols:"3"});
				runner.assertNotEqual(null, r);
				domConst.place(r.domNode, placeHolderId, "replace");
				r.startup();
				var childWidget, prop;
				for(var i = 0, len =Math.min(WIDGET_PROPS.length, WIDGET_LABELS.length); i<len ;i++){
					childWidget = IconMenuItem(lang.mixin(prop, WIDGET_PROPS[i], WIDGET_LABELS[i]));
					r.addChild(childWidget);
				}
				return r;
			}
			
			function _createAccordionProgrammaticallyWithSourceNodeReference(widgetId, childWidgetId){
				var r = new IconMenu({cols:"3"}, widgetId);
				r.startup();
				children = array.filter(r.domNode.childNodes, function(node){ return node.nodeType == 1; });
				var childWidget;
				for(var i = 0, len =Math.min(WIDGET_PROPS.length, children.length); i<len ;i++){
					childWidget = IconMenuItem(WIDGET_PROPS[i], children[i]);
					r.addChild(childWidget);
				}
				return r;
			}

			function _assertCorrectAccordion(widget){
				if(widget.domNode.dir=="rtl"){
					runner.assertEqual(WIDGET_CLASS_RTL, widget.domNode.className, "id= " + widget.domNode.id);
				}else{
					runner.assertEqual(WIDGET_CLASS, widget.domNode.className, "id= " + widget.domNode.id);
				}
				

				var childWidgets = widget.getChildren();
				runner.assertEqual(ITEM_NUM, childWidgets.length, "id= " + widget.domNode.id + " childWidgets.length=" + childWidgets.length);

				runner.assertTrue(domClass.contains(childWidgets[0].domNode, WIDGET_ICON_SEL), WIDGET_ICON_SEL + " id=" + childWidgets[0].domNode.id);
				for(var i=0;i< ITEM_NUM;i++){
	 				runner.assertEqual(WIDGET_LABELS[i].label, dojo.trim(childWidgets[i].labelNode.innerHTML.replace(/\r\n|\n|\t/g,"")), "id=" + childWidgets[i].domNode.id);
	 				switch(i % COL_NUM){
						case 0:
							runner.assertTrue(domClass.contains(childWidgets[i].domNode, CHILDWIDGET_CLASSNAME2), CHILDWIDGET_CLASSNAME2 + " id=" + childWidgets[i].domNode.id);
							break;
						case (COL_NUM-1):
							runner.assertTrue(domClass.contains(childWidgets[i].domNode, CHILDWIDGET_CLASSNAME3), CHILDWIDGET_CLASSNAME3 + " id=" + childWidgets[i].domNode.id);
							break;
					}
	 				switch(Math.floor(i / COL_NUM)){
						case 0:
							runner.assertTrue(domClass.contains(childWidgets[i].domNode, CHILDWIDGET_CLASSNAME4), CHILDWIDGET_CLASSNAME4 + " id=" + childWidgets[i].domNode.id);
							break;
						case (Math.floor(ITEM_NUM/COL_NUM) -1):
							runner.assertTrue(domClass.contains(childWidgets[i].domNode, CHILDWIDGET_CLASSNAME5), CHILDWIDGET_CLASSNAME5 + " id=" + childWidgets[i].domNode.id);
							break;
					}
				}
			}

			function _showView2(){
				var view1 = registry.byId("view1");
				view1.performTransition("view2", 1, "none");
			}
			dojo.ready(function(){
				doh.register("dojox.mobile.test.doh.AccordionTests", [
					function testInView1(){
						var widget1 = _createAccordionDeclaratively("dojox_mobile_IconMenu_0");
						var widget2 = _createAccordionProgrammatically("view1-IconMenu2place", "view1-IconMenu2");
						var widget3 = _createAccordionProgrammaticallyWithSourceNodeReference("view1-IconMenu3");

						_assertCorrectAccordion(widget1);
						_assertCorrectAccordion(widget2);
						_assertCorrectAccordion(widget3);
					},
					function testInView2(){
						var widget1 = _createAccordionDeclaratively("dojox_mobile_IconMenu_1");
						var widget2 = _createAccordionProgrammatically("view2-IconMenu2place", "view2-IconMenu2place");
						var widget3 = _createAccordionProgrammaticallyWithSourceNodeReference("view2-IconMenu3");

						_showView2();

						_assertCorrectAccordion(widget1);
						_assertCorrectAccordion(widget2);
						_assertCorrectAccordion(widget3);
					}
				]);
				runner.run();
			});
		})
	</script>

</head>
<body>
	<div id="view1" data-dojo-type="dojox.mobile.View" dir="rtl">
		<h1>View 1</h1>
		<ul data-dojo-type="dojox.mobile.IconMenu" style="width:274px;height:210px;margin:20px;" data-dojo-props='cols:3'>
			<li data-dojo-type="dojox.mobile.IconMenuItem" data-dojo-props='label:"Mute", icon:"../../images/tab-icon-36w.png", selected:true'></li>
			<li data-dojo-type="dojox.mobile.IconMenuItem" data-dojo-props='label:"Keypad", icon:"../../images/tab-icon-32w.png"'></li>
			<li data-dojo-type="dojox.mobile.IconMenuItem" data-dojo-props='label:"Settings", icon:"../../images/tab-icon-30w.png"'></li>
			<li data-dojo-type="dojox.mobile.IconMenuItem" data-dojo-props='label:"Info", icon:"../../images/tab-icon-16w.png"'></li>
			<li data-dojo-type="dojox.mobile.IconMenuItem" data-dojo-props='label:"Tour", icon:"../../images/tab-icon-19w.png", moveTo:"view2", transition:"slide", closeOnAction:true'></li>
			<li data-dojo-type="dojox.mobile.IconMenuItem" data-dojo-props='label:"Contacts", icon:"../../images/tab-icon-29w.png"'></li>
		</ul>
		<div id="view1-IconMenu2place"></div>
		<div id="view1-IconMenu3" style="width:274px;height:210px;margin:20px;" >
			<li>Mute</li>
			<li>Keypad</li>
			<li>Settings</li>
			<li>Info</li>
			<li>Tour</li>
			<li>Contacts</li>
		</div>
	</div>
	<div id="view2" data-dojo-type="dojox.mobile.View">
		<h1>View 2</h1>
		<ul data-dojo-type="dojox.mobile.IconMenu" style="width:274px;height:210px;margin:20px;" data-dojo-props='cols:3' dir="rtl">
			<li data-dojo-type="dojox.mobile.IconMenuItem" data-dojo-props='label:"Mute", icon:"../../images/tab-icon-36w.png", selected:true'></li>
			<li data-dojo-type="dojox.mobile.IconMenuItem" data-dojo-props='label:"Keypad", icon:"../../images/tab-icon-32w.png"'></li>
			<li data-dojo-type="dojox.mobile.IconMenuItem" data-dojo-props='label:"Settings", icon:"../../images/tab-icon-30w.png"'></li>
			<li data-dojo-type="dojox.mobile.IconMenuItem" data-dojo-props='label:"Info", icon:"../../images/tab-icon-16w.png"'></li>
			<li data-dojo-type="dojox.mobile.IconMenuItem" data-dojo-props='label:"Tour", icon:"../../images/tab-icon-19w.png", moveTo:"view2", transition:"slide", closeOnAction:true'></li>
			<li data-dojo-type="dojox.mobile.IconMenuItem" data-dojo-props='label:"Contacts", icon:"../../images/tab-icon-29w.png"'></li>
		</ul>
		<div id="view2-IconMenu2place"></div>
		<div id="view2-IconMenu3" style="width:274px;height:210px;margin:20px;" >
			<li>Mute</li>
			<li>Keypad</li>
			<li>Settings</li>
			<li>Info</li>
			<li>Tour</li>
			<li>Contacts</li>
		</div>
	</div>
</body>
</html>
